<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>方法调用监控面板</title>
    <link rel="stylesheet" type="text/css" href="/static/monitor.css"/>
    <script src="/static/monitor.js"></script>
</head>
<body>
<div class="container">
    <!-- 摘要统计卡片 -->
    <div class="summary-cards">
        <div class="card card-primary">
            <div class="card-title">请求</div>
            <div class="card-text" id="requestCount">0</div>
        </div>
        <div class="card card-success">
            <div class="card-title">通过</div>
            <div class="card-text" id="consumCount">0</div>
        </div>
        <div class="card card-info">
            <div class="card-title">通过率</div>
            <div class="card-text" id="avgConsumRate">0%</div>
        </div>
    </div>

    <!-- 刷新控制 -->
    <div class="control-panel">
        <button id="refreshBtn" class="btn btn-primary">刷新数据</button>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="autoRefresh">
            <label class="form-check-label" for="autoRefresh">自动刷新</label>
        </div>
        <select id="refreshInterval" class="form-select">
            <option value="5000">5秒</option>
            <option value="10000" selected>10秒</option>
            <option value="30000">30秒</option>
            <option value="60000">1分钟</option>
        </select>
        <button class="btn btn-toggle" onclick="updateRules()" style="float: right;">
            修改限流/代理规则
        </button>
    </div>

    <!-- 方法调用统计表 -->
    <div class="table-container">
        <div id="rateLimter">
            <div class="loading">
                <div class="spinner"></div>
                <p>正在加载数据...</p>
            </div>
        </div>
    </div>

    <!-- 弹出框结构 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <span class="close-btn" id="close-modal">🗙</span>
            <textarea id="rules" style="width: 100%; height: calc(100% - 70px);margin-top: 25px;"></textarea>
            <div>
                <button  class="btn" onclick="formatJSON()">格式化</button>
                <button  class="btn" onclick="validateJSON()">验证并保存</button>
            </div>
        </div>
    </div>

    <div id="toast">这是一个Toast通知消息</div>
</div>
</body>
</html>
